
<template>
  <div class="good-container">
    <div
      v-if="currentToast"
      class="toast"
     >
      <img
        :src="currentToast"
        alt=""
      >
    </div>
    <section class="main">
      <div ref="head" class="header">
        <div @click="leftBtn" class="arrow-left">
          <img src="../../images/left.png" alt="">
        </div>
        <tab
          :line-width=2
          active-color='#333333'
          v-model="currentIndex"
          custom-bar-width="0"
          default-color="#999999"
         >
          <tab-item
            class="vux-center"
            @on-item-click="changeTab(index)"
            :selected="demo2 == item"
            v-for="(item, index) in list2"
            :key="index"
          >
           {{item}}</tab-item>
          <div
            v-if="info.isDistribution == 'y'&&userInfo.memberType != 0"
            id="sharing"
            @click="linkto('/good_qrcode?id='+id)"
          ></div>
        </tab>
      </div>
      <div class="main-wrap">
        <div
          class="goods"
          ref="goods"
         >
          <!-- <span id="service"></span> -->
          <section class="swiper">
            <swiper
              auto
              :show-dots="false"
              height="7.5rem"
              v-model="swipersIndex"
              @on-index-change="onIndexChange"
             >
              <swiper-item
                class="swiper-demo-img"
                v-for="(item, index) in swipers"
                :key="index"
              >
                <div
                  @click="previewClick(item.img)"
                  :style="{backgroundImage:'url(' +item.img+')'}"
                  class="goods-banner"
                ></div>
              </swiper-item>
            </swiper>
            <div id="indicator">{{swipersIndex+1}}/{{swipers.length}}</div>
          </section>
          <section class="description">
            <div class="description-title">{{info.title}}</div>
            <div class="description-tag">
              <span class="price-tag">
                积分： <p>
                  {{info.salePrice}}
                </p>
                <p> </p>
              </span>
              <span class="desc-tag">
                <p></p>
                <!-- <p>热销 {{info.showSalesCount}}</p> -->
                <p>运费 : {{info.fright?`￥${info.fright}`:'包邮'}}</p>
              </span>
            </div>
          </section>
          <img
            style="width:100%"
            :src="info.labelImageUrl?info.labelImageUrl.fileUrl:''"
            class="tag"
            alt=""
          >
          <section
            class="type"
            v-on:click="showPoplayer=true"
          >
            {{selector.title}}：{{selector.size}} {{selector.type}}<img
              src="../../images/fanhui_you@2x.png"
              alt=""
            />
          </section>
          <!-- <section class="banner">
            <span><img
                src="../../images/britqx@2x.png"
                alt=""
              /></span>
            <span>宝得适britax百变骑士汽车儿童安 全座椅isofix9个月-12岁英国品...</span>
          </section> -->
          <section class="compreview">
            <div class="compreview-header">商品评价 ({{commentCount}})</div>
            <div
              class="compreview-wrapper"
              v-for="(item,index) in commentArr"
              :key="index"
              v-if="index<=1"
            >
              <div class="userinfo">
                <div class="avatar"><img
                    :src="item.avatarUrl"
                    alt=""
                  /></div>
                <div class="user-desc">
                  <div class="user-name">{{item.niceName}}</div>
                  <div class="user-time">{{item.evaluationTime }}</div>
                </div>
              </div>
              <div class="usercontent">{{item.content}}</div>
              <div
                class="userimgs"
                v-if="item.imageList&&item.imageList.length"
              >
                <img
                  v-for="(img,index) in item.imageList"
                  :key="index"
                  :src="img.fileUrl||''"
                  @click="commentPreviewClick(img.fileUrl,item.imageList)"
                  alt=""
                />
              </div>
              <div class="usergood">
                <span>尺寸 : {{item.modelName?item.modelName.split(':')[0]:'--' }}</span>
                <span>颜色 : {{item.modelName?item.modelName.split(':')[1]:'--' }}</span>
              </div>
            </div>
            <div
              class="compreview-footer"
              v-if="commentArr.length"
            >
              <span @click="changeTab(2)">查看全部评价</span>

            </div>
            <div
              v-else
              class="compreview-placeholder"
              @click="toggleComments"
            >该商品还没有评价哦~<i>点击切换显示评价</i></div>
          </section>
          <!-- <section class="askpreview">

            <div
              class="compreview-header"
              @click="linkto('./askPeople?productCode='+info.productCode)"
            >问大家 ({{askCount}})<img
                src="../../images/fanhui_you@2x.png"
                alt=""
              /></div>
            <div
              class="ask-qt"
              v-for="(item,index) in askArr"
              :key="index"
              @click="linkto('./askPeople?productCode='+info.productCode)"
            >
              <div class="ask-icon">问</div>
              <div class="ask-word"> {{item.content }}</div>
              <div class="answer_num">{{item.replyCount }}个回答</div>
            </div>
            <div
              v-if="!askCount"
              class="compreview-placeholder"
              @click="toggleComments"
            >该商品还没有提问哦~</div>
          </section> -->
          <section
            class="footer"
            ref="footerscroll"
          >
            <div
              class="compreview-header"
              @click="todetail(1)"
            >继续滑动查看商品详情</div>
          </section>
        </div>
        <div
          v-html="info.detail"
          class="detail"
          ref="detail"
         >

        </div>
        <div
          class="comment"
          ref="comment"
         >
          <section class="compreview">
            <!-- <div class="compreview-header">商品评价  ({{comments.length}})</div> -->
            <div
              class="compreview-wrapper"
              v-for="(item,index) in commentArr"
              :key="index"
            >
              <div class="userinfo">
                <div class="avatar">
                  <div
                    class="img"
                    :style="{backgroundImage:'url(' +item.avatarUrl+')'}"
                    alt=""
                  ></div>
                </div>
                <div class="user-desc">
                  <div class="user-name">{{item.niceName||'匿名'}}</div>
                  <div class="user-time">{{item.evaluationTime }}</div>
                </div>
              </div>
              <div class="usercontent">{{item.content}}</div>
              <div
                class="userimgs"
                v-if="item.imageList&&item.imageList.length"
              >
                <img
                  v-for="(img,index) in item.imageList"
                  :key="index"
                  :src="img.fileUrl||''"
                  @click="commentPreviewClick(img.fileUrl,item.imageList)"
                  alt=""
                />
              </div>
              <div class="usergood">
                <span>尺寸 : {{item.modelName?item.modelName.split(':')[0]:'--' }}</span>
                <span>颜色 : {{item.modelName?item.modelName.split(':')[1]:'--' }}</span>
              </div>
            </div>
            <div
              v-if="!commentArr.length"
              class="compreview-placeholder"
            >该商品还没有评价哦~</div>
          </section>
        </div>
          <section
            :class="showPoplayer?'poplayer--show':'poplayer--hide'"
            @touchmove.prevent
           >
            <div
              class="poplayer-mask"
              v-on:click="showPoplayer=false"
            ></div>
            <div class="poplayer-bd">
              <div class="poplayer-bd__head">
                <span id="poplayer_currentswiper"><img
                    :src="selectObj.imgSrc?selectObj.imgSrc:info.exampleImageUrl.fileUrl"
                    alt=""
                  ></span>
                <span class="__head-info">
                  <img
                    src="../../images/login_del_icn@2x.png"
                    alt=""
                    v-on:click="showPoplayer=false"
                  />
                  <div class="__head-info__price">
                    积分： <p>{{selectObj.price||info.salePrice}}</p>
                    <p> </p>
                  </div>
                  <div class="__head-info__choose">
                    <p>{{selectObj.title}}</p>
                    <p>{{selectObj.size}}</p>
                    <p>{{selectObj.type}}</p>
                  </div>
                </span>
              </div>
              <div class="poplayer-bd__select">
                <div class="__select-title">尺寸</div>
                <div class="__select-item">
                  <span
                    v-for="(size, sizeIndex) in info.sizeList"
                    :key="sizeIndex"
                    :class="[{'__select-item--selected':selectedSize==size.size},{'cancel':(size.isSale == 'n'||size.modelStock == 0)}]"
                    @click="onSelecting(sizeIndex,'size',size.isSale,size.modelStock)"
                  >{{size.size}}</span>
                </div>
              </div>
              <div class="poplayer-bd__select">
                <div class="__select-title">颜色</div>
                <div class="__select-item">
                  <span
                    v-for="(color, colorIndex) in info.colorList"
                    :key="colorIndex"
                    :class="[{'__select-item--selected':selectedColor==color.modelName},{'cancel':(color.isSale == 'n'||color.modelStock == 0)}]"
                    @click="onSelecting(colorIndex,'color',color.isSale,color.modelStock)"
                  >{{color.modelName}}</span>
                </div>
              </div>
              <div class="poplayer-bd__number">
                <span class="__number-title">兑换数量</span>
                <span class="__number-count">
                  <p
                    class="__numbr-count-change"
                    v-on:click="selected-=1"
                  >-</p>
                  <p class="__number-count-num">{{selected}}</p>
                  <p
                    class="__numbr-count-change"
                    v-on:click="selected+=1"
                  >+</p>
                </span>
              </div>
              <div :class="['poplayer-foot',{'cancel':goodsUpState}]">
                <span v-on:click="poplayerBtn" style="width: 100%;">确定</span>
                <!--<span @click="buyPay('/account')" v-if="!goodsUpState">立即兑换</span>-->
              </div>
            </div>
          </section>
      </div>
    </section>
    <section class="footer">
      <div class="footer-panel">
        <span
          @click="$router.push('/')"
          class="footer-panel__home"
        >
          <img
            src="../../images/shouye @2x.png"
            alt=""
          />
          <p>首页</p>
        </span>
        <!-- <span
          class="footer-panel__collection"
          @click="onCollect"
        >
          <img
            v-if="info.isCollection != 'y'"
            src="../../images/shoucang@2x.png"
            alt=""
          />
          <img
            v-else
            src="../../images/shoucang_xuanzhong@2x.png"
            alt=""
          >
          <p>收藏</p>
        </span> -->
        <span
          @click="linkto('/carts')"
          :class="{'footer-panel__cart':true, 'footer-panel__cart--showcartsnum':carts_num}"
        >
          <img
            src="../../images/gouwuche@2x.png"
            alt=""
          />

          <p>购物车</p>
          <i>{{carts_num}}</i>
        </span>
      </div>
      <div :class="['footer-btn',{'cancel':goodsUpState}]">
        <span
          id="btn_cart"
          v-on:click="cartNumAdd"
          :style="goodsUpState ? 'width: 100%' : ''"
        >加入购物车</span><span
          id="btn_buy"
          @click="buyPay('/account','true')"
          v-if="!goodsUpState"
        >立即兑换</span>
      </div>
    </section>
  </div>
</template>

<script>
import {
  Tab,
  TabItem,
  Sticky,
  Divider,
  XButton,
  Swiper,
  SwiperItem
} from "vux";
const toasts = [
  require("../../images/收藏成功@2x.png"),
  require("../../images/取消收藏@2x.png"),
  require("../../images/已加入购物车@2x.png")
];
const defaultSelector = { title: "请选择", size: "规格", type: "类型" };

import CONSTANT from "../../../wechat/static/constant/urlconstant";
import common from "../../../wechat/static/common/common";
import { setTimeout } from "timers";
export default {
  components: {
    Tab,
    TabItem,
    Sticky,
    Divider,
    XButton,
    Swiper,
    SwiperItem
  },
  name: "goods_container",
  data() {
    return {
      id: "",
      info: "",
      swipers: [],
      swipersIndex: 0,
      commentArr: [],
      commentCount: 0,
      selectedSize: null,
      selectObj: {
        size: "",
        type: "",
        imgSrc: "",
        price: "",
        linePrice: ""
      },
      selectedColor: null,
      pageState: 0,
      selectedIndex: "",
      shoppingState: false,
      currentToast: "",
      uncollected: true,
      panels: [],
      carts_num: 0,
      list2: ['商品','详情','评论'],
      currentIndex: 0,
      demo2: "商品",
      getBarWidth: function(index) {
        return (index + 1) * 22 + "px";
      },
      onshelf: true,
      offset: 0,
      showPoplayer: false,
      selector: defaultSelector,
      goodsUpState:false,

      good: {
        title: "秋冬新款韩版宽松chic针织开衫纯色长袖慵懒风扣子毛衣女外套",
        price: "128.00",
        delprice: "198",
        express: "10",
        sales: 9877,
        produce: 7,
        maker: "CHANEL制造商直供"
      },
      selected: 1,
      fregit: 0,
      userInfo:'',
      times: 0,
      type: ""
    };
  },
  mounted() {
    let { id } = this.$router.currentRoute.query;
    this.id = id;
    this.getInfo();
    this.catrBypage();
    this.getUserInfo()
    setTimeout(()=>{
      this.onScroll()
    },1500)
  },
  watch: {
    offset(nval, oldVal) {
      console.log(nval, oldVal);
      if (this.offset >= 498 && nval > oldVal) {
        this.tocomment(1);
        this.offset = 0;
      }
    }
  },
  methods: {
    leftBtn(){
      this.$router.back(-1)
    },
    getUserInfo() {
      let url = CONSTANT.MY.USERINFO;
      common.get(url, "", res => {
        if (res.code == 200) {
          this.userInfo = res.data.bussData;
          common.setCookie("userId", this.userInfo.id);
        }
      });
    },
    onScroll(){
      let that = this;
      window.onscroll = function() {
        let headH = that.$refs.head.offsetHeight
        //变量scrollTop是滚动条滚动时，距离顶部的距离
        console.log(headH,that.$refs.goods.offsetTop,that.$refs.detail.offsetTop)
        var scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop; //变量windowHeight是可视区的高度
        if(scrollTop<that.$refs.detail.offsetTop-headH){
          that.pageState = 0;
          that.demo2 = that.list2[0];
        }
        if(scrollTop>=that.$refs.detail.offsetTop-headH&&scrollTop<that.$refs.comment.offsetTop-headH){
          that.pageState = 1;
          that.demo2 = that.list2[1];
        }
        if(scrollTop>=that.$refs.comment.offsetTop-headH){
          that.pageState = 2;
          that.demo2 = that.list2[2];
        }
      };
    },
    getConfig() {
      var pageUrl = window.location.href.split("#")[0];
      let url = `${CONSTANT.LIST.WECHATREJECT}?url=${pageUrl}`;
      common.post(url, "", res => {
        if (res.code == 200) {
          let data = res.data.bussData;
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: data.appId, // 必填，公众号的唯一标识
            timestamp: data.appId, // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature, // 必填，签名，见附录1
            jsApiList: [
              "checkJsApi", //判断当前客户端版本是否支持指定JS接口
              "previewImage",
              "onMenuShareTimeline", //分享到朋友圈
              "onMenuShareAppMessage" //分享给朋友
            ]
          });
        }
      });
    },
    previewClick(url) {
      let arr = [];
      this.swipers.map(item => {
        arr.push(item.img);
      });
      wx.previewImage({
        current: url, // 当前显示图片的http链接
        urls: arr // 需要预览的图片http链接列表
      });
    },
    commentPreviewClick(url, imgArr) {
      console.log(imgArr);
      let arr = [];
      imgArr.map(item => {
        arr.push(item.fileUrl);
      });
      wx.previewImage({
        current: url, // 当前显示图片的http链接
        urls: arr // 需要预览的图片http链接列表
      });
    },
    poplayerBtn() {
      if (this.type == 'cart') {
        if (this.shoppingState) {
          this.cartNumAddMath();
        } else {
          this.shoppingState = false;
          this.showPoplayer = false;
        }
      } else if (this.type == 'buy') {
        this.buyPay('/account')
      }

    },
    onIndexChange(index) {
      this.swipersIndex = index;
    },
    getInfo() {
      let url = CONSTANT.LIST.PRDOUCTBYID;
      common.get(url, this.id, res => {
        if (res.code == 200) {
          this.info = res.data.bussData;
          this.info.imageUrls.map(item => {
            this.swipers.push({
              img: item.fileUrl
            });
          });
    
          let arr = []
          this.info.sizeList.forEach(item=>{
            arr.push({
              size:item,
              isSale:'y',
              modelStock:1
            })
          })
          this.info.sizeList = arr
          console.log(this.info.sizeList,'this.info.sizeList')
          this.getComment(this.info.goodsCode);
          this.selectObj.imgSrc = this.info.modelList.length
            ? this.info.modelList[0].modelImageUrl
            : "";
        }
      });
    },
    getComment(id) {
      let param = {
        pageIndex: 1,
        pageSize: 10000,
        productCode :id
      };
      let url = CONSTANT.LIST.COMMENTPAGE;
      common.post(url, param, res => {
        if (res.code == 200) {
          this.commentArr = res.data.bussData;
          this.commentCount = res.data.count ? res.data.count : 0;
        }
      });
    },
    onSelecting(index, flag,sale,num) {
      if(sale == 'n') return
      if(num == 0){
        this.$vux.toast.show({
          text: "当前库存为空",
          type: "cancel"  
        });
        return
      }
      this.selectObj.title = "已选";
      switch (flag) {
        case "size":
          const size = this.info.sizeList[index].size;
          this.selectedSize = size;
          this.selectObj.size = size;
          this.info.modelList.map(item=>{
            if(item.modelSize == size){
              this.info.colorList.map( item1 => {
                item1['isSale'] = item.isSale
                item1.modelStock = item.modelStock
                if(item1.modelName == this.selectObj.type&&item.modelStock == 0){
                  this.selectedColor = null
                  this.selectObj.type = null
                  this.selectObj.imgSrc=''
                }
              })
            }
          })
          break;
        case "color":
          const type = this.info.colorList[index].modelName;
          this.selectedColor = type;
          this.selectObj.type = type;
          this.selectObj.imgSrc = this.info.colorList[index].modelImageUrl;
          this.info.modelList.map(item=>{
            if(item.modelName == type){
              this.info.sizeList.map( (item1, index) => {
                item1 = {
                  size:item.modelSize,
                  isSale:item.isSale,
                  modelStock:item.modelStock
                }
              })
              this.info.sizeList.forEach(list=>{
                if(item.modelSize == list.size){
                  list.modelStock = item.modelStock
                }
              })
              
            }
          })
          break;
        default:
          break;
      }

      this.info.modelList.map((item, index) => {
        if (item.modelSize == this.selectObj.size && item.modelName == this.selectObj.type) {
          let arr = this.info.modelList[index];
          this.selectedIndex = index;
          this.selectObj.price = arr.modelSalePrice;
          this.selectObj.linePrice = arr.modelLinePrice;
        }
      });
    },
    buyPay(link, state) {
      this.type = 'buy'
      if(!this.showPoplayer){
        this.showPoplayer = true;
        return
      }
      if(this.goodsUpState) return
      let obj = this.selectObj;
      if (!obj.size) {
        this.$vux.toast.show({
          text: "请选择尺寸",
          type: "warn"  
        });
        if (state) {
          this.showPoplayer = true;
        }
        return false;
      }
      if (!obj.type) {
        this.$vux.toast.show({
          text: "请选择颜色",
          type: "warn"
        });
        if (state) {
          this.showPoplayer = true;
        }
        return false;
      }
      this.info.modelList.map((item, index) => {
        if (item.modelSize == obj.size && item.modelName == obj.type) {
          this.selectedIndex = index;
        }
      });
      this.$router.push({
        path: link,
        query: {
          id: this.id,
          index: this.selectedIndex,
          cartNum: this.selected
        }
      });
    },
    toGoodPreview(path, swipers, index) {
      this.$router.push({
        name: "good_preview",
        params: {
          swipers
        }
      });
    },
    tocomment(index) {
      this.$emit("to-com-det", index);
    },
    todetail(index) {
      this.$emit("to-com-det", index);
    },
    //dev preview, should be deleted afterwards
    toggleComments() {
      this.comments = [
        {
          user_name: "Dan Abramov",
          avatar: img,
          timestamp: "2013-2-1  10:02:27",
          content:
            "不显胖，特别薄，有点透，需要穿件内搭。因为很薄所以没什么垂感，不适合矮个子。",
          imgs: [img, img],
          size: "M",
          color: "灰色"
        },
        {
          user_name: "Dan Abramov",
          avatar: img,
          timestamp: "2013-2-1  10:02:27",
          content:
            "不显胖，特别薄，有点透，需要穿件内搭。因为很薄所以没什么垂感，不适合矮个子。",
          size: "M",
          color: "灰色"
        }
      ];
    },
    cartNumAdd() {
        this.type = "cart";
//      if(this.goodsUpState) return
        this.shoppingState = true;
        this.showPoplayer = true;
    },
    cartNumAddMath(){
      let obj = this.selectObj,
        modeList = this.info.modelList;
      if (!obj.size) {
        this.$vux.toast.show({
          text: "请选择尺寸",
          type: "warn"
        });
        this.shoppingState = true;
        this.showPoplayer = true;
        return false;
      }
      if (!obj.type) {
        this.$vux.toast.show({
          text: "请选择颜色",
          type: "warn"
        });
        this.shoppingState = true;
        this.showPoplayer = true;
        return false;
      }
      modeList.map((item, index) => {
        if (item.modelSize == obj.size && item.modelName == obj.type) {
          this.selectedIndex = index;
        }
      });
      let param = {
        count: this.selected,
        modelCode: modeList[this.selectedIndex].modelCode,
        productCode: this.info.goodsCode
      };
      let url = CONSTANT.LIST.cartAdd;
      common.post(url, param, res => {
        if (res.code == 200) {
          this.carts_num += 1;
          this.currentToast = toasts[2];
          this.showPoplayer = false;
          this.shoppingState = false;
          setTimeout(() => {
            this.currentToast = "";
          }, 1000);
        }
      });
    },
    catrBypage() {
      let param = {
        pageIndex: 1,
        pageSize: 1
      };
      let url = CONSTANT.LIST.cartPage;
      common.post(url, param, res => {
        if (res.code == 200) {
          this.carts_num = res.data.count || 0;
        }
      });
    },
    onCollect() {
      let param = {
        productId: this.id
      };
      let url = CONSTANT.LIST.updCollection;
      common.post(url, param, res => {
        if (res.code == 200) {
          this.info.isCollection = this.info.isCollection == "y" ? "n" : "y";
          this.info.isCollection =='y'
            ? (this.currentToast = toasts[0])
            : (this.currentToast = toasts[1]);
          const that = this;
          setTimeout(function() {
            that.currentToast = "";
          }, 1000);
        }
      });
    },
    changeTab(index) {
      this.pageState = index;
      this.demo2 = this.list2[index];
      let scrollTopH;
      if(index == 0){
          scrollTopH = 0
      }else if(index == 1){
         scrollTopH = this.$refs.detail.offsetTop
      }else{
         scrollTopH = this.$refs.comment.offsetTop
      }
      document.getElementById
      this.$nextTick(() => {
          window.scrollTo(0,scrollTopH);
      });

    },
    linkto(path) {
      this.$router.push(path);
    },
    toComOrDet(index) {
      this.demo2 = this.list2[index];
      this.changeTab(index,);
    }
  },
  watch: {},
  created() {
    // this.$router.push("/goods");
  }
};
</script>
<style lang="less" scoped="goods-container">
span,
i {
  display: inline-block;
  font-style: normal;
}
// .header-title{
// 	height:1rem;
// 	line-height:1rem;
// 	color:black;
// 	border-bottom: 1px solid #f7f7f7;
// 	width:100%;
// 	background-color:#fff;
// 	z-index: 999;
// 	span{
// 		width: 100%;
// 		height:0.6rem;
// 		text-indent: -0.2rem;
// 		font-size: 0.28rem;
// 		color:black !important;
// 	}
// 	i{
// 		width: 0.2rem;
// 		height:0.8rem;
// 		background:url("../../images/left.png") no-repeat center;
// 		background-size: 100% 0.40rem;
// 		float: left;
// 		transform: translateY(10%);
// 	}
// }
.goods_container {
  width: 100vw;
  overflow: hidden;
  &::-webkit-scrollbar {
    display: none;
  }
}
.main {
  &::-webkit-scrollbar {
    display: none;
  }
}
.header {
  position: fixed;
  top: 0;
  overflow: hidden;
  z-index: 100;
  height: 1rem;
  width: 100%;
  .arrow-left{
    position: absolute;
    left: .1rem;
    top: .2rem;
    height: .9rem;
    width: 1rem;
    z-index: 99;
    img{
      height: .5rem;
      width: .5rem;
    }
  }
}
.main-wrap {
  span,
  i,
  p {
    margin: 0;
    padding: 0;
  }
  .detail {
    padding: 0.2rem;
    overflow-x: hidden;
    background-color: #fff;
    img,
    video {
      max-width: 100%;
    }
  }
  .comment {
    min-height: 100%;
    background-color: #fff;
    margin-bottom: 1.5rem;
    .compreview-header {
      padding-left: 0.26rem;
      height: 1rem;
      background-color: #e3e3e3;
      font-size: 0.28rem;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      line-height: 1rem;
    }
    .compreview-footer {
      position: relative;
      height: 1.5rem;
      width: 100%;
      text-align: center;
      font-size: 0.24rem;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      color: rgba(126, 86, 198, 1);
      span {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        border: 0.01rem solid rgba(126, 86, 198, 1);
        width: 2rem;
        border-radius: 0.5rem;
        height: 0.5rem;
        line-height: 0.5rem;
        letter-spacing: 0.02rem;
      }
    }
    .compreview-placeholder {
      height: 1.5rem;
      line-height: 1.5rem;
      width: 100%;
      text-align: center;
      font-size: 0.28rem;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      color: rgba(153, 153, 153, 1);
    }

    .usercontent {
      padding: 0.25rem 0.31rem 0.26rem 0.24rem;
      font-size: 0.26rem;
      text-overflow: ellipsis;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      line-height: 0.26rem;
    }
    .userimgs,
    .usergood {
      display: flex;
      align-items: center;
      img {
        width: 1.6rem;
        height: 1.6rem;
        margin-right: 0.2rem;
      }
    }
    .usergood {
      padding-bottom: 0.2rem;
      padding-top: 0.1rem;
      font-size: 0.24rem;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      color: rgba(169, 169, 169, 1);
      line-height: 0.5rem;
      height: 0.5rem;
      align-items: center;
      span {
        margin-right: 0.2rem;
      }
    }
  }
  .userinfo {
    padding: 0.4rem 0.31rem 0 0.24rem;
    display: flex;
    flex-direction: row;
    .avatar {
      padding-right: 0.21rem;
      width: 0.72rem;
      height: 0.71rem;
      .img {
        width: 0.72rem;
        height: 0.71rem;
        border-radius: 50%;
        background-size: cover;
        background-repeat: no-repeat;
      }
    }
    .user-name {
      position: relative;
      top: -0.05rem;
      font-size: 0.32rem;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }
    .user-time {
      position: relative;
      top: -0.1rem;
      font-size: 0.2rem;
      font-family: PingFang-SC-Regular;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
    }
  }
  .goods {
    width: 100vw;
    height: auto;
    overflow: hidden;
    background-color: #fff;
    &::-webkit-scrollbar {
      display: none;
    }

    .goods-banner {
      width: 7.5rem;
      height: 7.5rem;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
  .swiper {
    position: relative;
  }
  .onshelf {
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    background: rgba(243, 238, 255, 1);
    font-size: 0.32rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(126, 86, 198, 1);
    i {
      float: right;
      top: 50%;
      right: 0.26rem;
      transform: translateY(-50%);
      width: 0.12rem;
      height: 0.22rem;
      background: url("../../images/ic 拷贝 3@2x.png") center no-repeat;
      background-size: contain;
      vertical-align: middle;
    }
  }
  #indicator {
    position: absolute;
    z-index: 111;
    right: 0;
    bottom: 0;
    margin: 0.24rem;
    width: 0.72rem;
    height: 0.36rem;
    background: rgba(38, 38, 38, 1);
    opacity: 0.3;
    border-radius: 0.18rem;
    font-size: 0.22rem;
    text-align: center;
    font-family: PingFang-SC-Regular;
    font-weight: 400;
    color: rgba(255, 254, 254, 1);
    line-height: 0.34rem;
  }
  .description {
    padding: 0.39rem 0.26rem 0 0.26rem;
    .description-title {
      max-height: 1.1rem;
      margin-bottom: 0.2rem;
      font-size: 0.32rem;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      line-height: 1.1;
      overflow: hidden;
      text-overflow: clip;
      word-break: break-all;
    }
    .description-tag {
      height: 0.5rem;
      line-height: 0.5rem;
      margin-bottom: 0.2rem;
      white-space: nowrap;
      span {
        width: 50%;
      }
      .price-tag {
        color: rgba(126, 86, 198, 1);
        p:nth-child(1) {
          font-size: 0.44rem;
          font-family: PingFang-SC-Bold;
          font-weight: bold;
        }
        p:nth-child(2) {
          margin-left: 0.05rem;
          font-size: 0.24rem;
          font-family: PingFang-SC-Regular;
          font-weight: 400;
          text-decoration: line-through;
          color: rgba(153, 153, 153, 1);
        }
      }
      .desc-tag {
        font-size: 0.24rem;
        color: rgba(153, 153, 153, 1);
        p {
          margin: 0 0.38rem;
        }
      }
    }
    .description-produce {
      height: 0.7rem;
      line-height: 0.7rem;
      .produce-name {
        text-align: center;
        p {
          height: 0.34rem;
          padding: 0.01rem 0.22rem;
          letter-spacing: 0.03rem;
          font-size: 0.22rem;
          background-color: #7e56c6;
          font-family: PingFangSC-Regular;
          font-weight: 200;
          color: rgba(255, 255, 255, 1);
          line-height: 0.32rem;
        }
      }
      .produce-data {
        float: right;
        height: 0.34rem;
        padding-top: 0.2rem;
        font-size: 0.24rem;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 0.34rem;
        img {
          height: 0.22rem;
          width: 0.22rem;
        }
      }
    }
    .decription-service {
      display: flex;
      position: relative;
      width: 100%;
      height: 1rem;
      justify-content: space-between;
      align-items: center;
      font-size: 0.26rem;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      background-color: #fafafa;
      color: rgba(0, 0, 0, 1);
      line-height: 38px;
      opacity: 0.8;

      &::before {
        content: "";
        position: absolute;
        left: -0.26rem;
        width: 0.26rem;
        height: 100%;
        background-color: #fafafa;
      }
      &::after {
        content: "";
        position: absolute;
        right: -0.26rem;
        width: 0.26rem;
        height: 100%;
        background-color: #fafafa;
      }
      img {
        height: 0.2rem;
        width: 0.2rem;
        border-radius: 0.2rem;
      }
    }
  }
  .type {
    position: relative;
    height: 1rem;
    line-height: 1rem;
    font-size: 0.3rem;
    padding-left: 0.26rem;
    border-bottom: 0.2rem solid #fafafa;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(153, 153, 153, 1);
    img {
      position: absolute;
      vertical-align: center;
      right: 0;
      top: 50%;
      margin-top: -0.15rem;
      margin-right: 0.26rem;
      height: 0.3rem;
      width: 0.22rem;
    }
  }
  .banner {
    width: 100%;
    height: 1.4rem;
    box-sizing: border-box;
    padding: 0.36rem 0.26rem;
    span {
      width: 70%;
      line-height: 1.6;
      font-size: 0.26rem;
      font-family: PingFang-SC-Bold;
      font-weight: bold;
      color: rgba(51, 51, 51, 1);
      text-overflow: ellipsis;
      &:nth-child(1) {
        width: 25%;
        text-align: center;
        margin-bottom: 0.1rem;
        overflow: hidden;
      }
    }
    img {
      width: 0.98rem;
      height: 0.44rem;
    }
  }
  .compreview-header {
    padding-left: 0.26rem;
    height: 1rem;
    background-color: #fafafa;
    font-size: 0.28rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    line-height: 1rem;
  }
  .compreview-footer {
    position: relative;
    height: 1.5rem;
    width: 100%;
    text-align: center;
    font-size: 0.24rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(126, 86, 198, 1);
    span {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      border: 0.01rem solid rgba(126, 86, 198, 1);
      width: 2rem;
      border-radius: 0.5rem;
      height: 0.5rem;
      line-height: 0.5rem;
      letter-spacing: 0.02rem;
    }
  }
  .compreview-placeholder {
    height: 1.5rem;
    line-height: 1.5rem;
    width: 100%;
    text-align: center;
    font-size: 0.28rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(153, 153, 153, 1);
  }

  .userinfo {
    padding: 0.4rem 0.31rem 0 0.24rem;
    display: flex;
    flex-direction: row;
    .avatar {
      padding-right: 0.21rem;
      width: 0.72rem;
      height: 0.71rem;
      img {
        width: 0.72rem;
        height: 0.71rem;
        border-radius: 50%;
        background-size: cover;
      }
    }
  }
  .usercontent {
    padding: 0.26rem;
    font-size: 0.26rem;
    text-overflow: ellipsis;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    line-height: 0.4srem;
  }
  .userimgs,
  .usergood {
    padding: 0.05rem 0.26rem;
    display: flex;
    align-items: center;
    img {
      width: 1.6rem;
      height: 1.6rem;
      margin-right: 0.2rem;
    }
  }
  .usergood {
    font-size: 0.24rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(169, 169, 169, 1);
    line-height: 0.5rem;
    height: 0.5rem;
    align-items: center;
    span {
      margin-right: 0.2rem;
    }
  }
  .askpreview {
    margin-bottom: 1rem;
    .compreview-header {
      position: relative;
      img {
        position: absolute;
        vertical-align: center;
        right: 0;
        top: 50%;
        margin-top: -0.15rem;
        margin-right: 0.26rem;
        height: 0.3rem;
        width: 0.22rem;
      }
    }
  }
  .ask-qt {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 0.88rem;
    line-height: 0.88rem;
    padding-left: .24rem;
    padding-right: .2rem;
    border-bottom: 1px solid #FAFAFA;
    .ask-icon {
      display: inline-block;
      width: 0.3rem;
      height: 0.3rem;
      margin-bottom: 0.3rem;
      background: rgba(126, 86, 198, 1);
      border-radius: 0.04rem;
      font-size: 0.18rem;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 0.3rem;
      text-align: center;
      margin-right: 0.21rem;
      transform: translateY(0.12rem);
    }
    .ask-word {
      width: 5.3rem;
      height: .88rem;
      line-height: .88rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 0.3rem;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      // line-height:.38rem;
    }
    .answer_num {
      position: absolute;
      right: .64rem;
      font-size: 0.26rem;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      color: rgba(184, 184, 184, 1);
      line-height: 2;
    }
  }
  .footer {
    .compreview-header {
      text-align: center;
      color: #999999;
    }
  }
  .poplayer--hide {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    z-index: 666;
    background-color: #fff;
    transform: translateY(200%);
    transition: transform 0.7s linear;
    visibility: none;
    .poplayer-mask {
      opacity: 0;
      background: rgba(0, 0, 0, 0);
      transition: all 1s linear;
    }
  }
  .poplayer--show {
    transform: translateY(0);
    transition: transform 0.7s linear;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    z-index: 666;
    .poplayer-mask {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
    }
    .poplayer-bd {
      width: 100%;
      position: absolute;
      bottom: 0;
      background-color: #fff;
      z-index: 999;
      height: 10rem;
      overflow-y: auto;
      overflow-x: hidden;
      padding-bottom: 1.3rem;
      & > div {
        border-bottom: 1px solid #f7f7f7;
      }
    }
  }

  .poplayer-bd__head {
    width: 100%;
    white-space: nowrap;
    height: 1.7rem;
    .__head-info {
      position: relative;
      width: calc(100%-1.7rem);
      vertical-align: top;
      height: 1.7rem;
      padding-left: 0.2rem;
      img {
        position: absolute;
        width: 0.24rem;
        height: 0.24rem;
        left: 70%;
        top: 0.26rem;
      }
      div {
        width: 100%;
        height: 1.7/2rem;
        overflow: hidden;
        line-height: 2;
      }
      .__head-info__price {
        color: rgba(126, 86, 198, 1);
        p:nth-child(1) {
          font-size: 0.44rem;
          font-family: PingFang-SC-Bold;
          font-weight: bold;
        }
        p:nth-child(2) {
          margin-left: 0.05rem;
          font-size: 0.24rem;
          font-family: PingFang-SC-Regular;
          font-weight: 400;
          text-decoration: line-through;
          color: rgba(153, 153, 153, 1);
        }
      }
      .__head-info__choose {
        box-sizing: border-box;
        padding: 0.1rem;
        font-size: 0.3rem;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: rgba(102, 102, 102, 1);
        p {
          margin-right: 0.05rem;
        }
      }
    }
    #poplayer_currentswiper {
      position: relative;
      width: 1.7rem;
      height: 100%;
      img {
        position: absolute;
        // top: -20%;
        right: -0.1rem;
        width: 1.6rem;
        height: 1.6rem;
      }
    }
  }

  .poplayer-bd__select {
    min-height: 2.76rem;
    font-size: 0.3rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(102, 102, 102, 1);
    .__select-title {
      height: 0.7rem;
      line-height: 0.7rem;
      padding-left: 0.2rem;
    }
    .__select-item {
      display: flex;
      flex-wrap: wrap;
      & > span {
        min-width: 1.14rem;
        height: 0.54rem;
        line-height: 0.54rem;
        text-align: center;
        font-size: 0.28rem;
        margin: 0.3rem 0.3rem 0 0.2rem;
        background: rgba(245, 245, 245, 1);
        background: rgba(245, 245, 245, 1);
        border-radius: 0.04rem;
      }
      span.cancel
        {
          opacity:0.4;
        }
        
      & .__select-item--selected {
        color: rgba(255, 255, 255, 1);
        background: rgba(126, 86, 198, 1);
      }
    }
  }
  .poplayer-bd__number {
    height: 1.1rem;
    white-space: nowrap;
    padding-right: 0.28rem;
    span {
      width: 50%;
      height: 100%;
      line-height: 1.1rem;
      &:nth-child(2) {
        text-align: right;
      }
    }
    .__number-title {
      text-indent: 0.2rem;
      font-size: 0.3rem;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
    }
    .__number-count {
      p {
        height: 0.48rem;
        width: 1.13rem;
        text-align: center;
        vertical-align: middle;
        line-height: 0.48rem;
        &:nth-child(2) {
          height: 0.46rem;
          line-height: 0.46rem;
          border-collapse: clip;
          font-size: 0.3rem;
          border: 0.01rem solid rgba(175, 175, 175, 1);
        }
      }
      .__numbr-count-change {
        width: 0.56rem;
        font-size: 0;
        &:nth-child(1) {
          background: url("../../images/btn_jian@2x.png") center no-repeat;
          background-size: contain;
        }
        &:last-child {
          background: url("../../images/btn_jia@2x.png") center no-repeat;
          background-size: contain;
        }
      }
    }
  }
  .poplayer-foot {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.1rem;
    margin-top: 0.3rem;
    white-space: nowrap;
    font-size: 0.32rem;
    text-align: center;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    &.cancel{
      span{
        background-color: #CCAFFF;
        &:last-child{
          background-color: #7E56C6;
          opacity: .5;
        }
      }
    }
    span {
      width: 50%;
      height: 100%;
      line-height: 1.1rem;
      background: rgba(126, 86, 198, 1);
      &:nth-child(1) {
        // opacity: 0.6;
      }
    }
  }

  #service {
    position: fixed;
    height: 0.88rem;
    width: 0.88rem;
    background: url("../../images/45@2x.png") center no-repeat;
    background-size: cover;
    z-index: 1000;
    bottom: 4.51rem;
    right: 0.2rem;
  }
}
#sharing {
  position: absolute;
  width: 0.44rem;
  height: 0.44rem;
  background-color: aqua;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 0.3rem;
  background: url("../../images/cantuanguige_fenxiang@2x.png") no-repeat center;
  background-size: contain;
}
.main {
  padding-top: 0.9rem;
  margin-bottom: 1rem;
  .vux-tab-container {
  }
  .vux-tab .vux-tab-item {
    font-size: 0.32rem;
    &:nth-child(1) {
      text-align: right;
      margin-left: -1rem;
    }
    &:nth-child(2) {
    }
    &:nth-child(3) {
      text-align: left;
      margin-right: -1rem;
    }
  }
  .vux-tab-container {
    height: 0.88rem !important;
  }
}
.footer {
  position: fixed;
  z-index: 555;
  bottom: 0;
  background-color: #fff;
  box-shadow: 0px 2px 0px 0px rgba(230, 230, 230, 1);
  border-top: 1px solid #e6e6e6;
  box-sizing: border-box;
  height: 1rem;
  width: 100%;
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  div {
    height: 100%;
  }
  .footer-panel {
    width: 45%;
    display: flex;
    span {
      position: relative;
      flex: 1;
      height: 100%;
      white-space: pre-line;
      text-align: center;
      padding-top: 0.6rem;
      p {
        font-size: 0.2rem;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: rgba(102, 102, 102, 1);
      }
    }
    img {
      position: absolute;
      top: 0.14rem;
      left: 50%;
      transform: translateX(-50%);
      height: 0.5rem;
      width: 0.5rem;
      line-height: 0;
    }
    .footer-panel__cart {
      i {
        visibility: hidden;
        min-width: 0.3rem;
        height: 0.3rem;
        font-size: 0.2rem;
        line-height: 0.3rem;
        padding: 0.01rem;
        box-sizing: border-box;
        border-radius: 0.3rem;
        background-color: red;
        z-index: 3;
        position: absolute;
        top: 0.02rem;
        right: 0.2rem;
        color: #fff;
      }
      p {
        text-indent: 0.05rem;
      }
    }
    .footer-panel__cart--showcartsnum {
      i {
        visibility: visible;
      }
    }
  }
  .footer-btn {
    width: 55%;
    white-space: nowrap;
    overflow: hidden;
    &.cancel{
      span{
        background:rgba(204,175,255,1);
      }
      #btn_buy{
          opacity: 0.5; 
         background:rgba(126,86,198,1);
      }
    }
    span {
      width: 50%;
      height: 100%;
      text-align: center;
      line-height: 1rem;
      background: rgba(126, 86, 198, 1);
      font-size: 0.28rem;
      letter-spacing: 0.02rem;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      &:nth-child(1) {
        opacity: 0.5;
      }
    }
  }
}
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  height: 1.7rem;
  width: 1.7rem;
  z-index: 1000;
  transform: translate(-50%, -50%);
  img {
    height: 100%;
    width: 100%;
  }
}
</style>
